<script>
export default {
  name: 'CarbonAssetReport',
  props: {
    queryParams: {
      required: false,
      default: null
    },
    projectList: {
      required: false,
      default: []
    }
  },
  watch: {
    queryParams: {
      async handler(val) {
        if (val.sceneProjectId) {
          const param = {
            statisticsMode: val.statisticsMode,
            solidifyDateStart: val.startTime,
            solidifyDateEnd: val.endTime,
            sceneProjectId: val.sceneProjectId
          }
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            param.sceneEdificeId = val.roomInfo[0]
            param.sceneFloorId = val.roomInfo.length > 1 ? val.roomInfo[1] : null
            param.sceneRoomId = val.roomInfo.length > 2 ? val.roomInfo[2] : null
          }
          const res = await this.$api.carbonEmissionReport.carbonPrice(param)
          this.startTime = res.data.startDate
          this.endTime = res.data.endDate
          this.dataList = res.data.dataList
          const carbonQuotaRes = await this.$api.carbonEmissionReport.carbonQuota(param)
          this.usedCarbonQuota = carbonQuotaRes.data.usedValue
          this.carbonQuotaList = carbonQuotaRes.data.dataList
          const ccerRes = await this.$api.carbonEmissionReport.ccer(param)
          this.ccerList = ccerRes.data
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      dataList: [],
      usedCarbonQuota: 0,
      carbonQuotaList: [],
      ccerList: []
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryParams.sceneProjectId == null || project.value === this.queryParams.sceneProjectId)
        .map(project => project.label).join('，')
    },
    getRemainingCarbonQuota() {
      const addCarbonQuota = this.carbonQuotaList.filter(item => item.inputType === '3')
        .map(item => item.quotaValue).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
      const purchase = this.getPurchaseCarbonQuota
      const sold = this.getSoldCarbonQuota
      return addCarbonQuota - this.usedCarbonQuota + purchase - sold
    },
    getSoldCarbonQuota() {
      return this.carbonQuotaList.filter(item => item.inputType === '2').map(item => item.quotaValue).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
    },
    getSoldCcer() {
      return this.ccerList.filter(item => item.inputType === '2').map(item => item.ccerValue).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
    },
    getPurchaseCarbonQuota() {
      return this.carbonQuotaList.filter(item => item.inputType === '1').map(item => item.quotaValue).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
    },
    getPurchaseCcer() {
      return this.ccerList.filter(item => item.inputType === '1').map(item => item.ccerValue).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
    },
    getRemainingCCer() {
      return this.getPurchaseCcer - this.getSoldCcer
    }
  },
  methods: {
    getProjectNameByProjectId(projectId) {
      const project = this.projectList.find(project => project.value === projectId)
      return project ? project.label : null
    }
  }
}
</script>

<template>
  <div>
    <h2>08 碳资产情况</h2>
    <div class="analysis-box">
      <div>
        <h3>8.1 碳价情况</h3>
        <table style="width: 60%; margin: 0 15%">
          <thead>
          <tr>
            <th>数据时间</th>
            <th>所属项目</th>
            <th>CCER价格(元/tCO2e)</th>
            <th>碳配额价格(元/tCO2e)</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in dataList" :key="`${item.solidifyDate}_${index}`">
            <td>{{ item.solidifyDate }}</td>
            <td>{{ getProjectNameByProjectId(item.sceneProjectId) }}</td>
            <td>{{ item.ccerPrice }}</td>
            <td>{{ item.carbonQuotaPrice }}</td>
          </tr>
          </tbody>
        </table>
        <div style="margin: 0 15%">
          <p>注：展示每月/年的碳价为该月/年的平均值，如需查看每日碳价，请到碳资产管理的碳价数据查看。</p>
        </div>
      </div>
      <div>
        <h3>8.2 碳资产分析</h3>
        <div class="carbon-asset-analysis-data">
          <div class="item">
            <div>{{ getRemainingCarbonQuota + getRemainingCCer }}</div>
            <div>剩余碳资产</div>
          </div>
          <div class="item">
            <div>{{ getPurchaseCarbonQuota + getPurchaseCcer }}</div>
            <div>购入总量</div>
          </div>
          <div class="item">
            <div>{{ getSoldCarbonQuota + getSoldCcer }}</div>
            <div>售出总量</div>
          </div>
          <div class="item">
            <div>
              {{ carbonQuotaList.filter(item => (item.inputType === '1' || item.inputType === '2')).map(item => item.carbonIncome).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
            + ccerList.map(item => item.carbonIncome).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
              }}
            </div>
            <div>碳收益</div>
          </div>
        </div>
        <div style="padding: 0 5%">
          <div class="carbon-quota">
            <h4>8.2.1 碳配额</h4>
            <table style="width: 70%">
              <thead>
              <tr>
                <th>数据时间</th>
                <th>碳配额（tCO2）</th>
                <th>状态</th>
                <th>收益 (元）</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in carbonQuotaList" :key="item.id">
                <td>{{ item.createTm }}</td>
                <td>{{ item.quotaValue }}</td>
                <td>{{ item.inputTypeName }}</td>
                <td>{{ item.carbonIncome }}</td>
              </tr>
              </tbody>
            </table>
            <div style="margin: 0 10%">
              <p>
                {{ getProjectNames }}在 {{ startTime }}-{{ endTime }}中，
                购入碳配额总量为{{ getPurchaseCarbonQuota }} tCO2，
                售出碳配额总量为{{ getSoldCarbonQuota }} tCO2，
                收益总量为{{ carbonQuotaList.filter(item => (item.inputType === '1' || item.inputType === '2')).map(item => item.carbonIncome).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
                }}元。</p>
            </div>
          </div>
          <div class="carbon-ccer">
            <h4>8.2.2 CCER</h4>
            <table style="width: 70%">
              <thead>
              <tr>
                <th>数据时间</th>
                <th>CCER(tCO2)</th>
                <th>状态</th>
                <th>收益 (元）</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in ccerList" :key="item.id">
                <td>{{ item.createTm }}</td>
                <td>{{ item.ccerValue }}</td>
                <td>{{ item.inputTypeName }}</td>
                <td>{{ item.carbonIncome }}</td>
              </tr>
              </tbody>
            </table>
            <div style="margin: 0 10%">
              <p>{{ getProjectNames }}在{{ startTime }}-{{ endTime }}中，
                购入CCER总量为{{ getPurchaseCcer }}tCO2，
                售出CCER总量为{{ getSoldCcer }} tCO2，
                收益总量为{{ ccerList.map(item => item.carbonIncome).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
                }}元。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.analysis-box {
  margin: 0 5%;

  .carbon-asset-analysis-data {
    display: flex;
    width: 70%;
    margin: 0 15%;
    justify-content: space-around;

    .item {
      padding: 20px 36px;
      background: #f2f2f2;
      margin: 10px 0;
      text-align: center;
      line-height: 30px;
    }
  }

  table {
    border-collapse: collapse;
    width: 80%;
    margin: 0 10%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }

  p {
    text-indent: 2em;
    line-height: 24px;
  }
}
</style>
